<template>
    <div>
<el-steps :active="active" >
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>


<div>
       <Steps1 v-if="active == 0 ? true : false"></Steps1>
     <steps2 v-if="active == 1 ? true : false"></steps2>
</div>
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </div>
</template>

<script>
import Steps1 from './steps1'
import steps2 from './steps2'
  export default {
    data() {
      return {
        active: 0
      };
    },
 components: {
      Steps1,
      steps2,
    },
    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-steps{
    width: 500px;
}
</style>